.wrapper {
  .textBtn {
    border: none;
    min-width: auto !important;
    min-height: auto;
    border-radius: 4px;
    background: transparent !important;
    margin-left: 18px;
    box-shadow: none !important;

    &:global(.euiButton.euiButton--secondary) {
      color: var(--wbHoverIconColor) !important;

      &:hover,
      &:focus {
        color: var(--wbHoverIconColor) !important;
      }
    }

    :global(.euiButton__content) {
      padding: 6px;
    }

    :global(.euiButton__text) {
      font:
        normal normal normal 13px/17px Graphik,
        sans-serif !important;
    }

    &.activeBtn:global(.euiButton.euiButton-isDisabled.euiButton--fill.euiButton--secondary),
    :global(.euiButton.euiButton-isDisabled.euiButton--fill.euiButton--secondary) {
      background: var(--browserComponentActive) !important;
      color: var(--wbActiveIconColor) !important;
      opacity: 1;
    }
  }

  .noNamespaceMsg {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 80px auto 100px;

    :global(.euiTitle) {
      font-size: 18px;
      margin-bottom: 10px;
    }
  }
}

.wrapper {
  .wrapper .link {
    width: max-content;

    &:hover,
    &:focus {
      background-color: transparent !important;
    }

    :global(.euiButtonEmpty__content) {
      padding: 0;
      width: max-content;

      &:hover,
      &:focus {
        text-decoration: underline;
      }
    }

    :global(.euiButtonEmpty__content.euiButtonContent .euiButtonEmpty__text) {
      font:
        normal normal normal 13px/17px Graphik,
        sans-serif;
      color: var(--buttonSecondaryTextColor) !important;
    }

    :global(.euiButtonEmpty__content.euiButtonContent .euiButtonEmpty__text):hover,
    :global(.euiButtonEmpty__content.euiButtonContent .euiButtonEmpty__text):focus {
      color: var(--euiTextSubduedColorHover);
    }

    &.expanded {
      padding: 0 20px 0 12px;
    }

    &.expanded :global(.euiButtonEmpty__content.euiButtonContent .euiButtonEmpty__text) {
      color: var(--euiTextSubduedColor) !important;

      &:hover,
      &:focus {
        color: var(--euiTextSubduedColorHover) !important;
      }
    }
  }
}

.tableWrapper {
  @include eui.scrollBar;

  overflow: auto;
  position: relative;
  max-height: 100%;
  overflow-y: hidden;

  :global(.euiTableRow-isExpandedRow .euiTableCellContent) {
    padding: 0 12px !important;
  }
}

.wrapper .table {
  &:global(.fixedLayout) table {
    table-layout: fixed;
  }

  :global {
    .euiTableRowCell {
      border-color: transparent !important;
    }

    .nsp-cell {
      height: 42px;
    }

    .euiTableRowCell:first-child {
      padding-left: 12px;
    }

    .euiTableRowCell:last-child {
      padding-right: 12px;
    }

    .euiTableHeaderCell:first-child .euiTableCellContent {
      padding-left: 24px;
    }

    .euiTableHeaderCell:last-child .euiTableCellContent {
      padding-right: 24px;
    }

    .euiTableHeaderCell {
      min-width: 42px;
      background-color: var(--euiColorEmptyShade);

      .euiTableCellContent {
        padding: 12px;
        justify-content: flex-start;
        align-items: flex-end;

        &.euiTableCellContent--alignRight {
          justify-content: flex-start;
          align-items: flex-end;
          flex-direction: row-reverse;

          .euiTableSortIcon {
            margin-right: 4px;
            margin-left: 0;
          }
        }

        &.euiTableCellContent--alignCenter {
          justify-content: center;

          .euiTableSortIcon {
            margin-right: 0;
            margin-left: 4px;
          }
        }

        .euiTableCellContent__text {
          font:
            normal normal normal 12px/17px Graphik,
            sans-serif;
        }
      }

      .euiTableCellContent {
        border-bottom: 1px solid var(--euiColorLightShade);
        outline: 1px solid var(--euiColorEmptyShade);
      }
    }

    .expandBtn.euiTableCellContent {
      padding: 0;
    }

    .euiTableCellContent {
      padding: 10px;
      font:
        normal normal normal 14px/24px Graphik,
        sans-serif;

      &:global(.dataType) {
        padding: 10px 6px 2px;
      }
    }

    .euiTableHeaderButton.euiTableHeaderButton-isSorted {
      span,
      div {
        color: var(--htmlColor) !important;
      }
    }

    .euiTableHeaderButton:focus .euiTableCellContent__text {
      text-decoration: none;
    }
  }

  .valueUnit {
    font:
      normal normal normal 12px/17px Graphik,
      sans-serif !important;
    margin-left: 4px;
    color: var(--euiColorMediumShade) !important;
  }

  .headerCell {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
  }
}

.expanded {
  display: grid;
  grid-template-columns: auto calc(32%) calc(13% + 10px) calc(11% + 22px);
  grid-column-gap: 0;
  height: 42px;
  width: 100%;

  & div {
    display: flex;
    align-items: center;
  }

  .badge {
    margin: 0 !important;
  }

  .rightAlign {
    padding: 0 12px;

    &:last-child {
      padding: 0 26px 0 12px;
    }
  }
}

.rightAlign {
  justify-content: flex-end;
  padding: 12px;
}

:global(.euiTableCellContent) .delimiter span {
  cursor: pointer;
  color: var(--buttonSecondaryTextColor);
  font:
    normal normal normal 13px/17px Graphik,
    sans-serif;

  &:hover {
    text-decoration: underline;
  }
}

:global(.euiTableCellContent) .count {
  color: var(--euiTextSubduedColor);
  font: normal normal 500 16px/17px Inconsolata;
}

.badgesContainer {
  display: flex;
  flex-wrap: wrap;

  & .badge {
    margin: 0 7px 8px;
  }

  & .badge + .badge {
    margin-left: 6px !important;
  }

  :global(.euiBadge) span {
    font:
      normal normal normal 12px/16px Graphik,
      sans-serif;
    padding-top: 0 !important;
  }
}

.tooltip {
  width: auto;
}
